<template>
  <div>
    <div class="form-container">
      <v-form-title title="注册成功"></v-form-title>
      <div class="tips">
        <p><i class="iconfont icon-wancheng"> </i><span>恭喜您注册成功!</span></p>
      </div>
      <p class="link"> 0{{time}}秒后跳转到
        <router-link tag="span" to="/login">登录页</router-link>
      </p>
    </div>
  </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'

  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class Step3 extends Vue {
    time = 5
    timerId = null

    mounted () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(_ => {
        this.time -= 1
        if (this.time < 1) {
          this.$router.push('/login')
          clearInterval(this.timerId)
        }
      }, 1000)
    }
  }
</script>

<style lang="less" scoped>
  .form-container {
    width: 1180px;
    margin: 0 auto;
    padding: 60px 0 30px;
  }

  .el-steps {
    margin-bottom: 60px;
  }

  .tips {
    margin-top: 50px;
    text-align: center;
    i {
      color: #5CB87A;
      font-size: 60px;
      vertical-align: middle;
      margin-right: 20px;
    }
    p {
      color: #333;
      font-size: 30px;
      line-height: 60px;
    }
  }
  .link {
    margin-top: 200px;
    text-align: center;
    span {
      color: #409EFF;
      cursor: pointer;
    }
  }
</style>
